<template>
  <el-dialog :title="viewTitle" :visible.sync="visibile" append-to-body width="50%" @close="handleCancel" top="10vh">
    <div class="form-content">
      <avue-form ref="detailForm" :option="formOption" v-model="form" @submit="handleCancel">
        <template slot-scope="{ disabled, size }" slot="text3">
          <avue-crud :option="templateMaterialTableOption" :table-loading="loading" :data="data" ref="crud" @current-change="currentChange" @size-change="sizeChange">
          </avue-crud>
        </template>
      </avue-form>
    </div>
  </el-dialog>
</template>

<script>
import { setDetailOption, setOption, setShelfDetailOption } from '@/views/warehouse/productrefactor/warehouseManagement';
import { getTemplateMaterialTableOption } from '@/views/warehouse/productrefactor/materialStorageManagement';
import { detail, getList } from '@/api/warehouse/warehouseManagement';
export default {
  name: 'viewDialog',
  props: {
    visibile: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'WAREHOUSE'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    title(type) {
      // this.visibile = true;
    }
  },
  watch: {
    visibile: {
      handler(val) {
        if (val) {
          const titleMap = {
            WAREHOUSE: '仓库详情',
            STORAGE_AREA: '区域详情',
            STORAGE: '储位详情'
          };
          this.viewTitle = titleMap[this.type];
          this.form = this.rowData;
          this.data = this.rowData.partMasterList || [].map((item) => ({ categoryName: item.categoryName, name: item.name }));
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      loading: false,
      viewTitle: '',
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },
      templateMaterialTableOption: getTemplateMaterialTableOption(this),
      formOption: {
        submitBtn: false,
        emptyBtn: false,
        group: [
          {
            label: '基础信息',
            icon: 'el-icon-vertical-bar',
            column: setDetailOption(this.type).column.map((item) => ({ ...item, disabled: true }))
          },
          {
            label: '智能料架信息',
            icon: 'el-icon-vertical-bar',
            display: this.type === 'STORAGE_AREA',
            column: setShelfDetailOption(this.type).column.map((item) => ({ ...item, disabled: true }))
          },
          {
            label: '物料存储配置',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '物料存储等级',
                labelWidth: 150,
                span: 24,
                prop: 'materialStorageLevel',
                type: 'select',
                props: {
                  label: 'label',
                  value: 'value'
                },
                disabled: true,
                control: (val, form) => {
                  if (this.type !== 'WAREHOUSE') {
                    return {
                      materialStorageLevel: {
                        display: false
                      }
                    };
                  } else {
                    return {
                      materialStorageLevel: {
                        display: true
                      }
                    };
                  }
                },
                dicData: [
                  { label: 'L1', value: 1 },
                  { label: 'L2', value: 2 },
                  { label: 'L3', value: 3 },
                  { label: 'L4', value: 4 },
                  { label: 'L5', value: 5 },
                  { label: 'L6', value: 6 },
                  { label: 'L7', value: 7 },
                  { label: 'L8', value: 8 },
                  { label: 'L9', value: 9 },
                  { label: 'L10', value: 10 }
                ]
              },
              {
                label: '物料类别',
                prop: 'partCategoryNames',
                labelWidth: 150,
                disabled: true,
                span: 24
              },
              {
                label: '物料',
                labelWidth: 150,
                prop: 'text3',
                span: 24
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    handleCancel() {
      this.$refs.detailForm.resetForm();
      this.$emit('update:visibile', false);
      this.$emit('onCancel');
    }
    // async onLoad() {
    //   this.loading = true;
    //   try {
    //     const res = await detail({ id: this.rowData.id });
    //     console.log(res);
    //     // const data = res.data.data;
    //     // this.page.total = data.total;
    //     // this.data = data.records.map((item) => {
    //     //   return {
    //     //     ...item,
    //     //     hasChildren: item.hasChild
    //     //   };
    //     // });
    //   } catch (e) {
    //     console.warn(e);
    //   } finally {
    //     this.loading = false;
    //   }
    // },
    // currentChange(currentPage) {
    //   this.page.currentPage = currentPage;
    // },
    // sizeChange(pageSize) {
    //   this.page.pageSize = pageSize;
    // }
  }
};
</script>

<style scoped lang="scss">
.form-content {
  height: 70vh;
  overflow-y: scroll;
}
::v-deep .avue-crud__menu {
  display: none;
}

::v-deep .el-dialog .el-dialog__headerbtn {
  top: 5px;
}
</style>
